<template>
  <div class="app-container">
    <el-row>
      <el-button type="primary" @click="addParentMenu">新增顶级菜单</el-button>
    </el-row>

    <el-table :data="tableData" style="width: 100%" row-key="menuId" border lazy default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :default-expand-all="false">
      <el-table-column prop="menuName" label="名称"> </el-table-column>
      <el-table-column prop="menuType" label="菜单类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.menuType === 'M'" type="primary" disable-transitions>{{ scope.row.menuType }}</el-tag>
          <el-tag v-if="scope.row.menuType === 'C'" type="success" disable-transitions>{{ scope.row.menuType }}</el-tag>
          <el-tag v-if="scope.row.menuType === 'F'" type="info" disable-transitions>{{ scope.row.menuType }}</el-tag>
        </template>

      </el-table-column>
      <el-table-column prop="orderNum" label="显示顺序"> </el-table-column>
      <el-table-column prop="path" label="路由地址"> </el-table-column>
      <el-table-column prop="perms" label="权限标识"> </el-table-column>
      <el-table-column prop="icon" label="菜单图标"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="showMneu(scope.row)" type="text" size="small">新增</el-button>
          <el-button @click="editShowMenu(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="delMenu(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialTitle" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form :model="menuForm" :rules="rules" ref="menuForm">
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-input v-model="menuForm.parentMenuName" autocomplete="off" :disabled="menuForm.showDis"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio v-model="menuForm.menuType" label="M">目录</el-radio>
          <el-radio v-model="menuForm.menuType" label="C">菜单</el-radio>
          <el-radio v-model="menuForm.menuType" label="F">按钮</el-radio>
        </el-form-item>
        <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="menuName">
          <el-input v-model="menuForm.menuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请求地址" :label-width="formLabelWidth" prop="path">
          <el-input v-model="menuForm.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组件地址" :label-width="formLabelWidth" prop="component">
          <el-input v-model="menuForm.component" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" :label-width="formLabelWidth" prop="perms">
          <el-input v-model="menuForm.perms" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" :label-width="formLabelWidth" prop="orderNum">
          <el-input v-model="menuForm.orderNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" :label-width="formLabelWidth">
          <el-input v-model="menuForm.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单状态" :label-width="formLabelWidth">
          <el-radio v-model="menuForm.visible" label="0">显示</el-radio>
          <el-radio v-model="menuForm.visible" label="1">隐藏</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addMenu('menuForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
    
<script>

import { addMenu, menuList, editMenu, menuInfo, delMenu } from '@/api/sys/menu'
export default {
  name: "Depart",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      dialTitle: '添加菜单',
      menuForm: {
        showDis: true,
        menuType: 'C',
        visible: '0',
        menuId:0
      },
      formLabelWidth: "120px",
      dialogTitle: 1,
      row: {},
      rules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入请求地址', trigger: 'change' }
        ],
        component: [
          { required: true, message: '请输入组件地址', trigger: 'change' }
        ],
        perms: [
          { required: true, required: true, message: '请输入权限标识', trigger: 'change' }
        ],
        orderNum: [
          { required: true, required: true, message: '请排序', trigger: 'change' }
        ],
      }
    };
  },
  watch: {},
  mounted() {
    this.queryAll();
  },
  created() { },
  methods: {
    queryAll() {
      //发送请求到后端获取菜单数据
      menuList().then(res => {
        if (res.code === 200) {
          this.tableData = res.data
        }
      });
    },

    showMneu(row) {
      this.menuForm.showDis = true;
      this.dialogFormVisible = true;
      this.menuForm.parentId = row.menuId;
      this.menuForm.parentMenuName = row.menuName;
    },
    //添加菜单
    addMenu(menuForm) {
        this.$refs[menuForm].validate((valid) => {
          if (valid) {
            console.log(this.menuForm.menuId)
            if (this.menuForm.menuId != 0) {
              editMenu(this.menuForm).then(res => {
                if (res.code === 200) {
                  //关闭
                  this.handleClose();
                  //刷新列表
                  this.queryAll();
                }
              });
            } else {
              addMenu(this.menuForm).then(res => {
                if (res.code === 200) {
                  //关闭
                  this.handleClose();
                  //刷新列表
                  this.queryAll();
                }
              });
            }

          } else {
            return false;
          }
        });

    },
    delMenu(row) {
      delMenu({ "menuId": row.menuId }).then(res => {
        if (res.code === 200) {
          this.$message(res.msg);
          this.queryAll();
        }
      });
    },
    editShowMenu(row) {
      this.dialogFormVisible = true;
      this.menuForm.showDis = true;
      this.dialTitle = '修改菜单';
      menuInfo({ "menuId": row.menuId }).then(res => {
        if (res.code === 200) {
          if (res.data.menuType === 'M') {
            this.menuForm.parentMenuName = res.data.menuName;
          }
          this.menuForm = res.data
        }
      });
    },

    addParentMenu() {
      this.dialogFormVisible = true;
      this.menuForm.showDis = false;
    },
    handleClose() {
      this.dialogFormVisible = false;
      this.clearForm();
    },
    clearForm() {
      this.menuForm = {};
    },
  }
};
</script>
<style>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: hwb(210 95% 5%);
}

.bg-purple {
  border: 0px solid cornflowerblue;
  height: 200px;
}

.app-container {
  height: 100%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
}
</style>